<template>
	<view>
		<drag-box
		:pos_x="pos_x"
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view class="gifts-ver">
				<block v-if="example || users.length == 0">
					<gift/>
					<view class="gifts-mid">
						<!-- <view class="line"></view> -->
					</view>
					<gift/>
					<view class="gifts-mid">
						<!-- <view class="line"></view> -->
					</view>
					<gift/>
				</block>
				<block v-else>
					<block v-for="(user, index) in users" :key="user.id">
						<block v-if="user.show == 1">
							<gift :opt="user"/>
							<view v-if="index < (users.length - 1)" class="gifts-mid"  :style="{height: space + 'px'}"></view>
						</block>
					</block>
				</block>
			</view>
		</drag-box>
	</view>
</template>

<script>
	
	import dragBox from '@/components/drag-box/drag-box.vue'
	import gift from '@/components/gift/gift.vue'
	
	export default {
		components: {
			dragBox,
			gift
		},
		name:"gifts-vertical",
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
			space: {
				type: Number,
				default: 50
			},
			cpt_id: {
				type: Number,
				default: 0
			},
			example: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				users: []
			};
		},
		created() {
			this.configData()
			window.electronAPI.noticeUserCptTempChanged((from) => {
				if (from != 'gifts') {
					this.configData()
				}
			})
		},
		beforeDestroy() {
			window.electronAPI.removeNoticeUserCptTempChanged()
		},
		methods: {
			locationChanged(location) {
				this.$emit('locationChanged', location)
			},
			scaleChanged(scale) {
				this.$emit('scaleChanged', scale)
			},
			configData() {
				window.electronAPI.userList('gifts_user_temp', this.cpt_id).then((users) => {
					let us = []
					for (let u of users) {
						if (u.show == 1 && u.user_cpt_temp && u.user_cpt_temp.position != -1) {
							us.push(u)
						}
					}
					us.sort((a, b) => {
						return a.user_cpt_temp.position - b.user_cpt_temp.position
					})
					this.users = us
				})
			},
		}
	}
</script>

<style scoped>
	
	.gifts-ver {
		display: flex;
		flex-direction: column;
	}
	
	.gifts-mid {
		height: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.line {
		width: 30px;
		height: 1px;
		background-color: #fff;
		box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	}

</style>